$(function() {
  var layer = layui.layer
  var form = layui.form

  initArtCateList()

  // var p = {
  //   bookName: $('[name=bookName]').val(), 
  //   bookAuthorName: $('[name=bookAuthorName]').val(),  
  //   bookPrice: $('[name=bookPrice]').val(),     
  //   bookPlace: $('[name=bookPlace]').val(), 
  //   bookRemark: $('[name=bookRemark]').val(),          
  // }

  // 获取图书信息的列表
  function initArtCateList() {
    $.ajax({
      method: 'GET',
      url: '/api/book/queryAllBook',
      success: function(res) {
        var htmlStr = template('tpl-table', res)
        $('tbody').html(htmlStr)
        console.log(res)
      }
    })
  }

  // 为添加图书按钮绑定点击事件
  var indexAdd = null
  $('#btnAddCate').on('click', function() {
    indexAdd = layer.open({
      type: 1,
      area: ['500px', '400px'],
      title: '添加图书信息',
      content: $('#dialog-add').html()
    })
  })


  
  // 通过代理的形式，为 form-add 表单绑定 submit 事件，body绑定到form-add
      //因为点击按钮才能拼接出来，存在了才能再绑定事件,所以用代理形式
  $('body').on('submit', '#form-add', function(e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/api/book/addBook',
      contentType: 'application/json;charset=UTF-8',
      data: JSON.stringify({
        "bookName": $('[name=bookName]').val(), 
        "bookAuthorName": $('[name=bookAuthorName]').val(),  
        "bookPrice": $('[name=bookPrice]').val(),     
        "bookPlace": $('[name=bookPlace]').val(), 
        "bookRemark": $('[name=bookRemark]').val(), 
      }),
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('添加图书信息失败！')
        }
        initArtCateList()
        layer.msg('添加图书信息成功！')
        // 根据索引，关闭对应的弹出层
        layer.close(indexAdd)
      }
    })
  })

  // 通过代理的形式，为 btn-edit 按钮绑定点击事件
  var indexEdit = null
  $('tbody').on('click', '.btn-edit', function() {
    // 弹出一个修改图书信息的层
    indexEdit = layer.open({
      type: 1,
      area: ['500px', '400px'],
      title: '修改图书信息',
      content: $('#dialog-edit').html()
    })

    var bookShowId = $(this).attr('data-id')
   // console.log(id)
    // 发起请求获取对应图书的数据
    $.ajax({
      method: 'GET',
      url: '/api/book/queryBookById/' + bookShowId,
      success: function(res) {
        console.log(res)
        form.val('form-edit', res.data)
      }
    })
  })

  // 通过代理的形式，为修改图书的表单绑定 submit 事件
  $('body').on('submit', '#form-edit', function(e) {
    e.preventDefault()
    $.ajax({
      method: 'POST',
      url: '/api/book/updateBook',
      contentType: 'application/json;charset=UTF-8',
      data: JSON.stringify({
        "bookShowId": $('[name=bookShowId').val(),
        "bookName": $('[name=bookName]').val(), 
        "bookAuthorName": $('[name=bookAuthorName]').val(),  
        "bookPrice": $('[name=bookPrice]').val(),     
        "bookPlace": $('[name=bookPlace]').val(), 
        "bookRemark": $('[name=bookRemark]').val(), 
      }),
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('更新图书数据失败！')
        }
        layer.msg('更新图书数据成功！')
        layer.close(indexEdit)
        initArtCateList()
      }
    })
  })

  // 通过代理的形式，为删除按钮绑定点击事件
  $('tbody').on('click', '.btn-delete', function() {
    var bookShowId = $(this).attr('data-id')
    // 提示用户是否要删除
    layer.confirm('确认删除?', { icon: 3, title: '提示' }, function(index) {
      $.ajax({
        method: 'POST',
        url: '/api/book/deleteBook/' + bookShowId,
        success: function(res) {
          if (res.status !== 0) {
            return layer.msg('删除图书失败！')
          }
          layer.msg('删除图书成功！')
          layer.close(index)
          initArtCateList()
        }
      })
    })
  })
})
